<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/html">
	<head>
		<meta charset="utf-8">
		<title>EASYDEV</title>
		<link rel="stylesheet" type="text/css" href="{{$statics_url}}/admin/css/global.css"/>
		<link rel="stylesheet" type="text/css" href="{{$statics_url}}/admin/css/layout.css"/>
		<script type="text/javascript" src="{{$statics_url}}/lib/jquery-1.7.1.js"></script>

		
		<!--easyui-->
		<link rel="stylesheet" type="text/css" href="{{$statics_url}}/lib/easyui/themes/metro/easyui.css">
		<link rel="stylesheet" type="text/css" href="{{$statics_url}}/lib/easyui/themes/icon.css">
		<script type="text/javascript" src="{{$statics_url}}/lib/easyui/jquery.easyui.min.js"></script>

		<!--jlayout-->
		<script type="text/javascript" src="{{$statics_url}}/lib/jlayout/jquery.sizes.js"></script>
		<script type="text/javascript" src="{{$statics_url}}/lib/jlayout/jlayout.border.js"></script>
		<script type="text/javascript" src="j{{$statics_url}}/lib/layout/jquery.jlayout.js"></script>

		<!--图标库-->
		<link href="{{$statics_url}}/lib/metracss/css/modern.css" rel="stylesheet">

		<!--自定义样式-->
		<link rel="stylesheet" type="text/css" href="{{$statics_url}}/admin/css/common.css"/>

		<script type="text/javascript">
			jQuery(function($) {
				var container = $('.layout');

				function relayout() {
					container.layout({
						resize : false
					});
					$('#dg').datagrid({
						width : $('#ctn').width(),
						height : $('#ctn').height()
					});
				}

				relayout();

				$(window).resize(relayout);

				$('#toggle-west').click(function() {
					$('.west').animate({
						width : 'toggle'
					}, {
						duration : 10,
						complete : relayout,
						step : relayout
					});
				});

				$('#toggle-east').click(function() {
					$('.east').animate({
						width : 'toggle'
					}, {
						duration : 10,
						complete : relayout,
						end : relayout
					});
				});

				$('#toggle-north').click(function() {
					$('.north').animate({
						height : 'toggle'
					}, {
						duration : 10,
						complete : relayout,
						step : relayout
					});
				});

				$('#toggle-south').click(function() {
					$('.south').animate({
						height : 'toggle'
					}, {
						duration : 10,
						complete : relayout,
						step : relayout
					});
				});
			});
		</script>
		<style>
			html, body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}

			.layout {
				height: 100%;
			}

			.center, .east, .west, .north, .south {
				background-color: rgb(220,220,220);
				border: none;
				text-align: center;
				display: inline-block;
				overflow: auto;
			}

			.west, .east {
				width: 200px;
			}

			.north, .south {
				height: 50px;
			}
		</style>		
	</head>
	<body>
		<div data-layout='{"type": "border", "hgap": 0, "vgap": 0}' class="layout">
			<div class="center">
				<div id="cnt" style="width:100%;height:100%;">
					
				</div>
				<script type="text/javascript">
					$(function() {

						var pager = $('#dg').datagrid('getPager');
						// get the pager of datagrid
						pager.pagination({
							buttons : [{
								iconCls : 'icon-search',
								handler : function() {
									alert('search');
								}
							}, {
								iconCls : 'icon-add',
								handler : function() {
									alert('add');
								}
							}, {
								iconCls : 'icon-edit',
								handler : function() {
									alert('edit');
								}
							}]
						});

						$('#dg').datagrid({
							width : $('#ctn').width(),
							height : $('#ctn').height()
						});

					});

				</script>

			</div>
			<div class="east">
				East
			</div>
			<div class="west">
				West
			</div>
			<div class="north">
				<input id="toggle-east" type="button" value="asdf"/>
			</div>
		</div>
